<template>
  <div>
    <el-button text @click="addShow = true">添加学习内容</el-button>
    <el-dialog v-model="addShow" title="添加" width="30%">
      <el-input v-model="contents_info.title" placeholder="请输入标题" />
      <br /><br />
      <el-input v-model="contents_info.content" placeholder="请输入内容" />
      <br /><br />
      <el-input v-model="contents_info.intro" placeholder="请输入简介" />
      <br /><br />
      <input type="radio" value="1" v-model="contents_info.is_open" />公开
      <input type="radio" value="0" v-model="contents_info.is_open" />不公开
      <br /><br />
      <select v-model="contents_info.classify_name">
        <option
          v-for="(item, index) in classify_list"
          :key="index"
          :value="item.name"
        >
          {{ item.name }}
        </option>
      </select>
      <br /><br />
      <el-button type="primary" @click="add_contents">提交</el-button>
    </el-dialog>

    <el-button text @click="addResources = true">发布资源</el-button>
    <el-dialog v-model="addResources" title="添加" width="30%">
      <el-input v-model="resources.name" placeholder="请输入书名" />
      <br /><br />
      <el-input v-model="resources.depict" placeholder="请输入介绍" />
      <br /><br />
      <el-input v-model="resources.price" placeholder="请输入价格" />
      <br /><br />
      <select v-model="resources.contents_title">
        <option
          v-for="(item, index) in contents_list"
          :key="index"
          :value="item.title"
        >
          {{ item.title }}
        </option>
      </select>
      <br><br>
      <el-button type="primary" @click="add_resources">提交</el-button>
    </el-dialog>

    <table>
      <tr>
        <td>创建时间</td>
        <td>标题</td>
        <td>是否公开</td>
        <td>所属分类</td>
        <td>操作</td>
      </tr>
      <tr v-for="(item, index) in contents_list" :key="index">
        <td>{{ datetime(item.create_date) }}</td>
        <td>{{ item.title }}</td>
        <td>{{ item.is_open }}</td>
        <td>{{ item.classify }}</td>
        <td>
          <van-button
            type="default"
            @click="(nameShow = true), (id = item.id)"
            style="background: rgba(0, 0, 0, 0)"
            >修改</van-button
          >
          <van-button
            type="default"
            @click="del_contents(item.id)"
            style="background: rgba(0, 0, 0, 0)"
            >删除</van-button
          >
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import { datetime } from "../utils/utils";
export default {
  data() {
    return {
      datetime,
      addShow: false,
      contents_list: "",
      user_id: localStorage.getItem("id"),
      classify_list: "",

      contents_info: {
        title: "",
        content: "",
        intro: "",
        is_open: "",
        classify_name: "",
      },

      addResources: false,
      resources: {
        name: "",
        depict: "",
        price: "",
        contents_title:'',
      },
    };
  },
  mounted() {
    this.contents_show();
    this.classify_show();
  },
  methods: {
    contents_show: function () {
      this.myaxios(this.host + "study/contents/", "get", {
        user_id: this.user_id,
      }).then((data) => {
        console.log(data);
        if (data.code == 200) {
          this.$toast.success(data.msg);
          this.contents_list = data.data;
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    classify_show: function () {
      this.myaxios(this.host + "study/classifys/", "get").then((data) => {
        console.log(data);
        if (data.code == 200) {
          this.$toast.success(data.msg);
          this.classify_list = data.data;
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    add_contents: function () {
      this.myaxios(this.host + "study/contents/", "post", {
        title: this.contents_info.title,
        content: this.contents_info.content,
        intro: this.contents_info.intro,
        is_open: this.contents_info.is_open,
        classify_name: this.contents_info.classify_name,
        user_id: this.user_id,
      }).then((data) => {
        console.log(data);
        if (data.code == 200) {
          this.$toast.success(data.msg);
          this.addShow = false;
          this.contents_show();
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    del_contents: function (id) {
      this.myaxios(this.host + "study/content/" + id + "/", "delete").then(
        (data) => {
          console.log(data);
          if (data.code == 200) {
            this.$toast.success(data.msg);
            this.contents_show();
          } else {
            this.$toast.fail(data.msg);
          }
        }
      );
    },
    add_resources: function () {
      this.myaxios(this.host + "study/resources/", "post",{
        name:this.resources.name,
        depict:this.resources.depict,
        price:this.resources.price,
        user_id:this.user_id,
      }).then(
        (data) => {
          console.log(data);
          if (data.code == 200) {
            this.$toast.success(data.msg);
          } else {
            this.$toast.fail(data.msg);
          }
        }
      );
    },
  },
};
</script>

<style>
</style>